import React, {Component} from 'react';

import {
    Button,
    Platform,
    StyleSheet,
    Text,
    StatusBar,
    Image,
    Dimensions,
    TouchableOpacity,
    View
} from 'react-native';
import ColorStyles from "../common/ColorStyles";
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view'
import HomeFlatListView from "./HomeFlatListView";

const {width: sw, height: sh} = Dimensions.get('window');

export default class XmgHome extends React.Component {
    static navigationOptions = {
        title: '首页',
        headerStyle: {
            backgroundColor: '#055099',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
            fontSize: 16,
        },
        headerLeft: (
            <Button
                title="back"
                color="#ffffff00"
            />
        ),
        headerRight: (
            <Button
                onPress={() => alert('This is a button!')}
                title="Itiels"
                color="#ffffff00"
            />
        ),
    };

    tabArr = [
        {columnName: '头条', requestCode: 'T1348647909107'},
        {columnName: '娱乐', requestCode: 'T1348648517839'},
        {columnName: '科技', requestCode: 'T1348649580692'},
        {columnName: '手机', requestCode: 'T1348649654285'},
        {columnName: '冰雪运动', requestCode: 'T1486979691117'},
        {columnName: '云课堂', requestCode: 'T1421997195219'},
        {columnName: '游戏', requestCode: 'T1348654151579'},
        {columnName: '旅游', requestCode: 'T1348654204705'},
        {columnName: '二次元', requestCode: 'T1481105123675'},
        {columnName: '轻松一刻', requestCode: 'T1350383429665'},
        {columnName: '体育', requestCode: 'T1348649079062'}
    ];

    render() {

        return (
            <View style={{backgroundColor: '#F5FCFF', flex: 1}}>
                {/* 状态栏 */}
                <StatusBar backgroundColor={'rgba(255,255,255,0)'} translucent={true} animated={true}
                           barStyle={'light-content'}/>
                <View style={{
                    flexDirection: 'row',
                    paddingTop: 25,
                    backgroundColor: ColorStyles.green,
                    height: 63,
                    alignItems: 'center',
                }}>
                    <Text style={{fontSize: 14, color: '#fff', width: 0.15 * sw, textAlign: 'center',}}>首页</Text>
                    <TouchableOpacity style={{
                        backgroundColor: '#33333333',
                        width: sw * 0.7,
                        height: 30,
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderWidth: 0,
                        borderRadius: 15,
                        flexDirection: 'row'
                    }} activeOpacity={0.8} onPress={() => {
                        this.props.navigation.navigate('login');
                    }}>
                        <Image source={require('../../icon/i_search.png')} style={{width: 20, height: 20}}/>
                        <Text style={{fontSize: 14, color: '#fff', marginLeft: 8, textAlign: 'center',}}>搜索</Text>
                    </TouchableOpacity>
                </View>

                <View style={{flex: 1,}}>
                    <ScrollableTabView
                        ref={'tabView'}
                        renderTabBar={() => <ScrollableTabBar
                            style={{borderBottomWidth: 0, paddingBottom: 5, width: sw * .9, height: 45}}/>}
                        tabBarUnderlineStyle={{
                            height: 2,
                            minWidth: Math.floor(sw * .9 / 5),
                            backgroundColor: 'rgba(216,30,6,.8)'
                        }}
                        tabBarInactiveTextColor='#515151'
                        tabBarActiveTextColor='#d81e06'
                        tabBarTextStyle={{fontSize: 15}}
                        onChangeTab={(ref) => {
                        }}
                        onScroll={(position) => {
                        }}
                        locked={false}
                        initialPage={0}
                    >
                        {this.tabArr.map(item => {
                            return (
                                <HomeFlatListView
                                    key={item.columnName}
                                    tabLabel={item.columnName}
                                    requestCode={item.requestCode}
                                    navigation={this.props.navigation}
                                />
                            )
                        })}

                    </ScrollableTabView>
                    <TouchableOpacity onPress={() => alert('更多')} style={{position: 'absolute', top: 15, right: 10}}>
                        <Image source={require('../../icon/i_menu.png')} style={{width: 20, height: 20,}}/>
                    </TouchableOpacity>

                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({});

